<!--搜索位置-->
<template>
	<div class="contact">
		<div class="searchblock">
			<div class="searchinput">
				<input class="searchinputtxt" type="text" placeholder="请输入您要搜索的位置" v-model="sitemsg"
					@input="inquiresitefun" />
			</div>
			<div class="searchresult" :class="searsitedata.length > 0 ? 'acsearchresult' : ''">
				<div class="searchresultblock">
					<div class="resultitem" v-for="(item, index) in searsitedata" :key="index"
						@click="selesitefun(item, index)">
						<div class="sitename">{{ item.title }}</div>
					</div>
				</div>
			</div>
		</div>

		<div id="container"></div>
	</div>
</template>
<style scoped lang="less"></style>
<script>
export default {
	data() {
		return {
			isanti: true,
			sitemsg: '',
			searsitedata: []
		}
	},
	mounted() {
		this.initmap()
	},
	props: [
		"prefix"
	],
	methods: {
		selesitefun(item, index) {
			this.sitemsg = '';
			this.searsitedata = [];
			var marker;
			var maps = item.location;
			var center = new qq.maps.LatLng(maps.lat, maps.lng);
			var map = new qq.maps.Map(document.getElementById('container'), {
				center: center,
				zoom: 13
			});
			var marker = new qq.maps.Marker({
				position: center,
				map: map
			});
			this.sitemsg = item.address;
			this.$emit('getsitemsg', item);
		},
		initmap() {
			let that = this;
			var center = new qq.maps.LatLng(34.78919, 113.684878);
			var map = new qq.maps.Map(document.getElementById('container'), {
				center: center,
				zoom: 13
			});
			var marker;
			//添加监听事件  获取鼠标点击事件
			qq.maps.event.addListener(map, 'click', function (event) {
				if (!marker) {
					marker = new qq.maps.Marker({
						position: event.latLng,
						map: map
					});
					return;
				}
				marker.setPosition(event.latLng);
				let lat = event.latLng.lat;
				let lng = event.latLng.lng;
			});
		},
		inquiresitefun() {
			if (this.isanti) {
				this.isanti = false;
				setTimeout(() => {
					this.isanti = true;
					this.getsitemsg()
				}, 100)
			}
		},
		getsitemsg() {
			let search = this.sitemsg;
			if(this.prefix != 'undefined' && this.prefix != ''){
				search = this.prefix + search;
			}
			let sendData = {
				key: 'PU5BZ-NNMKZ-PGLXI-ZJUUJ-FWZ62-7GBV4',
				keyword: search
			}
			this.$axios('/admin/file/getSearchList', sendData).then(res => {
				this.searsitedata = res;
			});
		},
	}
}
</script>

<style scoped lang="less">
#container {
	width: 100%;
	height: 45vh;
	min-height: 400px;
	text-align: left;
}

.searchblock {
	position: relative;
	width: 100%;

	.searchinput {
		width: 90%;
		height: 50px;
		padding: 0 20px;
		background: #fff;
		margin-bottom: 20px;
		border-radius: 20px;

		.searchinputtxt {
			width: 100%;
			height: 50px;
			line-height: 50px;
			border: none;
			outline: none;
		}
	}

}

.searchresult {
	position: absolute;
	top: 60px;
	z-index: 100;
	width: 90%;
	height: 0px;
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
	transition: height .5s;

	.searchresultblock {
		padding: 10px 20px;

		.resultitem {
			width: 80%;
			height: 40px;
			line-height: 40px;
			cursor: pointer;

			.sitename {
				color: #333;
				font-size: 18px;
			}
		}
	}

}

.acsearchresult {
	height: 220px;
	overflow-y: scroll;
}
</style>